<script setup lang='ts'>
import { nextTick, ref } from 'vue'
import { NButton, NCard, NInputNumber, NModal, useDialog } from 'naive-ui'
import { fetchPayRecharge } from '@/api'
const dialog = useDialog()
const showModal = ref(false)
const bodyStyle = {
  width: '530px',
}
const vHtml = ref()
const model = ref({
  account: 1,
})
const payClick = () => {
  fetchPayRecharge({
    price: model.value.account,
  }).then((res) => {
    vHtml.value = res
    nextTick(() => {
      dialog.success({
        title: '支付确认',
        content: '即将跳转支付，请在新页面中完成支付',
        positiveText: '确定',
        negativeText: '取消支付',
        maskClosable: false,
        onPositiveClick: () => {
          document.forms[0].submit()
        },
        onMaskClick: () => {

        },
        onEsc: () => {
        },
      })
    })
  })
}
const show = () => {
  showModal.value = true
}
defineExpose({ show })
</script>

<template>
  <NModal v-model:show="showModal" class="custom-card" preset="card" title="" size="huge" :style="bodyStyle">
    <NCard title="充值" class="custom-card-put">
      <NInputNumber v-model:value="model.account" :precision="2" :min="1" :max="999" placeholder="请输入充值金额，最低1元">
        <template #suffix>
          元
        </template>
      </NInputNumber>
      <div style="text-align:center;margin-top:20px">
        <NButton type="success" @click="payClick">
          立即支付
        </NButton>
      </div>
      <div class="html-pay" v-html="vHtml" />
    </NCard>
  </NModal>
</template>

<style>
.custom-card .n-card-header {
  display: none !important;
}

.custom-card .n-card__content {
  padding: 0 !important;
}

.custom-card-put .n-card-header {
  display: block !important;
}

.custom-card-put .n-card__content {
  padding: 20px !important;
}
</style>
